<style type="text/css">
  .user {
    position: relative;
  }
  .user-list {
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    display: none;
    z-index: 10;
    max-height: 150px;
    overflow: auto;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .user-list li {
    padding: .4em;
    border-bottom: 1px solid #e9e9e9;
  }
  .user-list li:last-of-type {
    border-bottom: none;
  }
  .user-list li:hover {
    background-color: #eee;
  }
  .user-list .user-name {
    font-weight: 500;
  }
  .user-list .user-nickname {
    float: right;
    font-size: .8em;
  }
</style>

<form action="" class="form-horizontal" role="form">
  
  <div class="form-group">
    <label class="col-sm-2 control-label">配送员账号</label>
    <div class="col-sm-4">
  		<div class="col-sm-9">
	      <input id="user-input" type="text" class="form-control" placeholder="" name="name" value="" autocomplete="off">
	      <input id="user-id" type="hidden" name="uid" value="" />
	      <ul class="user-list" id="user-list"></ul>
	    </div>
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
      <a class="btn btn-default" onclick="javascript:history.go(-1)">返回上页</a>
      <a class="btn btn-default" onclick="self.location=document.referrer">返回上页并刷新</a>
      <button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/addPost">保存更改</button>
    </div>
  </div>
  
</form>

<script type="text/javascript">
$(function(){
  
  // 选择用户
  $( "#user-input" ).on( "keyup focus", function() {
    var v = $( this ).val();
    $.post( "__CONTROLLER__/getUserList", {"name": v}, function(data) {
      data.extra && showUserList( data.extra );
    });
  });
  
  $( "#user-input" ).on( "blur", function() {
    $( "#user-list" ).slideUp();
  });
  
  // 显示检索出的用户列表
  function showUserList( userList ) {
    var html = "";
    for(var i = 0; item = userList[i]; i++) {
      html += "<li data-name='"+ item.name +"' data-id='" + item.id + "'><span class='user-name'>" + item.name + "</span><i class='user-nickname'>" + item.nick_name + "</i></li>";
    };
    $( "#user-list" ).html( html ).slideDown();
  };
  
  // 点击选择检索出的列表
  $( "#user-list" ).delegate( "li", "click", function() {
    $( "#user-input" ).val( $(this).attr( "data-name" ) );
    $( "#user-id" ).val( $(this).attr("data-id") );
  });
});
</script>
